<template>
	<view>
		<view class='searchGood fixed-top'>
			<view class='search acea-row row-between-wrapper'>
				<view class='input acea-row row-between-wrapper'>
					<text class='iconfont icon-sousuo2'></text>
					<input type='text' v-model='keywords' placeholder='搜索来源/手机号码' placeholder-class='placeholder'
						maxlength="20" @confirm="searchBut"></input>
				</view>
				<view class='btn acea-row row-middle' @tap='searchBut'>
					<image src="@/static/images/user/select.png" mode="aspectFill"></image>
					 搜索
				</view>
				</view>
			</view>
		<view class="content">
			<view class='line'>
				<member :item="item" v-for="(item,index) in list" @reload="reload"></member>
			</view>
			<view class='loadingicon acea-row row-center row-middle'>
				<text class='loading iconfont icon-jiazai' :hidden='loading==true'></text>{{loadTitle}}
			</view>
		</view>
		<emptyPage v-if="list.length == 0 && !loading">
		</emptyPage>
	</view>
</template>
<script>
	import member from "@/pages/aboutUsers/components/memberList.vue";
	import emptyPage from '@/components/emptyPage.vue';
	import {
		spreadPeople
	} from '@/api/user.js'
	export default {
		components: {
			member,
			emptyPage
		},
		data() {
			return {
				list: [],
				searchValue: '',
				count: 0,
				page: 1,
				loading: true,
				loadend: false,
				loadTitle: '',
				keywords:''
			}
		},
		onShow() {
			this.getMemberList();
			uni.setNavigationBarTitle({
				// title: '下级成员(' + this.count + ')'
				title: '下级成员'
			})
		},
		methods: {
			reload(){
				this.page= 1;
				this.getMemberList();
			},
			getMemberList: function() {
				
				
				this.loading = false;
				spreadPeople({
					page: this.page,
					limit: this.count,
					keyword:this.keywords
				}).then(res => {
					console.log(res)
					this.loading = true;
					if (this.page == 1) {
						this.list = res.data.itemResponses;
						
						
						console.log(this.list)
						if (this.list.length <= 0) {
							this.loadTitle = '暂无数据'
						}
					} else {
						this.list = this.list.concat(res.data.list);
						if (res.data.list.length <= 0) {
							this.loadTitle = '已加载所有'
						}
					}
					if(res.data.num&&res.data.num>0){
						uni.setNavigationBarTitle({
							// title: '下级成员(' + this.count + ')'
							title: '下级成员('+this.list.length+')'
						})
					}
				})
			},
			
			searchBut: function() {
				let that = this;
				this.getMemberList();
			}
		},
		onReachBottom() {
			this.page++;
			// this.getMemberList();
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F7F8FA !important;
	}

	.fixed-top {
		width: 100%;
		height: 126rpx;
		position: fixed;
		top: 0%;
		left: 0;
		z-index: 999;
	}

	.searchGood .search {
		padding: 30rpx;
		background-color: #fff !important;
	}

	.searchGood .search .input {
		// width: 598rpx;
		background-color: #f7f7f7;
		border-radius: 33rpx;
		padding: 0 35rpx;
		box-sizing: border-box;
		height: 66rpx;
	}

	.searchGood .search .input input {
		width: 462rpx;
		font-size: 26rpx;
		padding-left: 10rpx;
	}

	.searchGood .search .input .placeholder {
		color: #bbb;
	}

	.searchGood .search .input .iconfont {
		color: #A6A6A6;
		font-size: 35rpx;
	}

	.searchGood .search .bnt {
		width: 120rpx;
		text-align: center;
		height: 66rpx;
		line-height: 66rpx;
		font-size: 30rpx;
		color: #282828;
	}

	.searchGood .title {
		font-size: 28rpx;
		color: #999;
		margin: 50rpx 30rpx 25rpx 30rpx;
	}

	.btn {
		image {
			width: 32rpx;
			height: 32rpx;
			mergin-right: 8rpx;
		}
	}

	.content {
		margin-top: 130rpx;
		overflow: hidden;
	}

	.line {
		margin: 30rpx;
		// background-color: #fff;
	}
</style>